<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 护工助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/icons.css">
    <style>
        /* 个人中心特有样式 */
        .profile-header {
            background: linear-gradient(135deg, #2B7DE1, #5497E7);
            color: white;
            padding: 20px 16px;
            position: relative;
        }
        
        .profile-info {
            display: flex;
            align-items: center;
        }
        
        .profile-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background-color: white;
            margin-right: 16px;
            overflow: hidden;
            border: 2px solid rgba(255, 255, 255, 0.6);
        }
        
        .profile-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .profile-name {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 4px;
        }
        
        .profile-id {
            font-size: 13px;
            opacity: 0.8;
        }
        
        .certification-badge {
            display: inline-block;
            background-color: rgba(255, 255, 255, 0.2);
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
            margin-top: 6px;
        }
        
        .certification-badge::before {
            content: "✓";
            margin-right: 4px;
        }
        
        .wallet-card {
            background-color: white;
            border-radius: 12px;
            margin: -20px 16px 16px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .wallet-title {
            display: flex;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        
        .wallet-title h3 {
            font-size: 16px;
            font-weight: 500;
        }
        
        .wallet-action {
            color: #2B7DE1;
            font-size: 13px;
        }
        
        .wallet-data {
            display: flex;
            justify-content: space-around;
            text-align: center;
        }
        
        .wallet-item {
            flex: 1;
        }
        
        .wallet-value {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin-bottom: 4px;
        }
        
        .wallet-label {
            font-size: 12px;
            color: #666;
        }
        
        .menu-group {
            background-color: white;
            border-radius: 12px;
            margin: 0 16px 16px;
            overflow: hidden;
        }
        
        .menu-title {
            padding: 12px 16px;
            font-size: 15px;
            color: #999;
            background-color: #f9f9f9;
        }
        
        .menu-item {
            display: flex;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .menu-item:last-child {
            border-bottom: none;
        }
        
        .item-icon {
            width: 24px;
            height: 24px;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        
        .item-content {
            flex: 1;
        }
        
        .item-title {
            font-size: 15px;
        }
        
        .item-arrow {
            color: #ccc;
        }
        
        .menu-badge {
            background-color: #FF3B30;
            color: white;
            font-size: 10px;
            border-radius: 10px;
            padding: 2px 6px;
            margin-left: 4px;
        }
        
        .logout-btn {
            margin: 20px 16px 40px;
            padding: 12px;
            text-align: center;
            background-color: #f7f7f7;
            border-radius: 6px;
            color: #666;
            font-size: 15px;
        }
        
        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .time {
            font-size: 14px;
        }
        
        .status-icons {
            display: flex;
            gap: 5px;
        }
        
        .icon {
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 顶部状态栏 -->
        <header class="profile-header">
            <div class="status-bar">
                <span class="time">10:25</span>
                <div class="status-icons">
                    <span class="icon">📶</span>
                    <span class="icon">📡</span>
                    <span class="icon">🔋</span>
                </div>
            </div>
            
            <div class="profile-info">
                <div class="profile-avatar">
                    <img src="data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'><rect width='70' height='70' fill='%23f0f0f0'/><text x='35' y='35' font-family='Arial' font-size='24' text-anchor='middle' dominant-baseline='central' fill='%23666'>头像</text></svg>" alt="头像">
                </div>
                <div>
                    <div class="profile-name">张护工</div>
                    <div class="profile-id">工号: 10086</div>
                    <div class="certification-badge">已认证</div>
                </div>
            </div>
        </header>
        
        <!-- 钱包卡片 -->
        <div class="wallet-card">
            <div class="wallet-title">
                <h3>我的钱包</h3>
                <a href="income.html" class="wallet-action">查看明细 ></a>
            </div>
            <div class="wallet-data">
                <div class="wallet-item">
                    <div class="wallet-value">¥3,650</div>
                    <div class="wallet-label">总收入</div>
                </div>
                <div class="wallet-item">
                    <div class="wallet-value">¥560</div>
                    <div class="wallet-label">可提现</div>
                </div>
                <div class="wallet-item">
                    <div class="wallet-value">15</div>
                    <div class="wallet-label">服务天数</div>
                </div>
            </div>
        </div>
        
        <!-- 工作管理菜单组 -->
        <div class="menu-group">
            <div class="menu-title">工作管理</div>
            <div class="menu-item" onclick="window.location.href='signin.html'">
                <div class="item-icon">📝</div>
                <div class="item-content">
                    <div class="item-title">上岗签到</div>
                </div>
                <div class="item-arrow">></div>
            </div>
            <div class="menu-item" onclick="window.location.href='orders.html'">
                <div class="item-icon">📋</div>
                <div class="item-content">
                    <div class="item-title">订单管理</div>
                </div>
                <div class="item-arrow">></div>
            </div>
            <div class="menu-item" onclick="window.location.href='leave-application.html'">
                <div class="item-icon">📅</div>
                <div class="item-content">
                    <div class="item-title">离职离岗申请</div>
                </div>
                <div class="item-arrow">></div>
            </div>
            <div class="menu-item" onclick="window.location.href='performance.html'">
                <div class="item-icon">🏆</div>
                <div class="item-content">
                    <div class="item-title">我的绩效</div>
                </div>
                <div class="item-arrow">></div>
            </div>
            <div class="menu-item" onclick="window.location.href='work-report.html'">
                <div class="item-icon">📊</div>
                <div class="item-content">
                    <div class="item-title">工作报表</div>
                </div>
                <div class="item-arrow">></div>
            </div>
        </div>
        
        <!-- 收入管理菜单组 -->
        <div class="menu-group">
            <div class="menu-title">收入管理</div>
            <div class="menu-item" onclick="window.location.href='income.html'">
                <div class="item-icon">💰</div>
                <div class="item-content">
                    <div class="item-title">收入明细</div>
                </div>
                <div class="item-arrow">></div>
            </div>
            <div class="menu-item" onclick="window.location.href='withdraw.html'">
                <div class="item-icon">💳</div>
                <div class="item-content">
                    <div class="item-title">提现管理</div>
                </div>
                <div class="item-arrow">></div>
            </div>
            <div class="menu-item" onclick="window.location.href='bank-cards.html'">
                <div class="item-icon">🏦</div>
                <div class="item-content">
                    <div class="item-title">银行卡管理</div>
                </div>
                <div class="item-arrow">></div>
            </div>
        </div>
        
        <!-- 个人资料菜单组 -->
        <div class="menu-group">
            <div class="menu-title">个人资料</div>
            <div class="menu-item" onclick="window.location.href='basic-info.html'">
                <div class="item-icon">👤</div>
                <div class="item-content">
                    <div class="item-title">基本资料</div>
                </div>
                <div class="item-arrow">></div>
            </div>
            <div class="menu-item" onclick="window.location.href='verification.html'">
                <div class="item-icon">🔐</div>
                <div class="item-content">
                    <div class="item-title">实名认证</div>
                </div>
                <div class="item-arrow">></div>
            </div>
            <div class="menu-item" onclick="window.location.href='certificates.html'">
                <div class="item-icon">📜</div>
                <div class="item-content">
                    <div class="item-title">资质证书</div>
                </div>
                <div class="item-arrow">></div>
            </div>
            <div class="menu-item" onclick="window.location.href='skills.html'">
                <div class="item-icon">🎯</div>
                <div class="item-content">
                    <div class="item-title">技能标签</div>
                </div>
                <div class="item-arrow">></div>
            </div>
        </div>
        
        <!-- 系统设置菜单组 -->
        <div class="menu-group">
            <div class="menu-title">系统设置</div>
            <div class="menu-item" onclick="window.location.href='account-security.html'">
                <div class="item-icon">🔒</div>
                <div class="item-content">
                    <div class="item-title">账号与安全</div>
                </div>
                <div class="item-arrow">></div>
            </div>
            <div class="menu-item" onclick="window.location.href='notifications.html'">
                <div class="item-icon">🔔</div>
                <div class="item-content">
                    <div class="item-title">消息通知</div>
                </div>
                <div class="menu-badge">2</div>
                <div class="item-arrow">></div>
            </div>
            <div class="menu-item" onclick="window.location.href='settings.html'">
                <div class="item-icon">⚙️</div>
                <div class="item-content">
                    <div class="item-title">通用设置</div>
                </div>
                <div class="item-arrow">></div>
            </div>
            <div class="menu-item" onclick="window.location.href='customer-service.html'">
                <div class="item-icon">📞</div>
                <div class="item-content">
                    <div class="item-title">联系客服</div>
                </div>
                <div class="item-arrow">></div>
            </div>
            <div class="menu-item" onclick="window.location.href='help.html'">
                <div class="item-icon">❓</div>
                <div class="item-content">
                    <div class="item-title">帮助中心</div>
                </div>
                <div class="item-arrow">></div>
            </div>
        </div>
        
        <!-- 退出登录按钮 -->
        <div class="logout-btn" onclick="logout()">
            退出登录
        </div>

        <!-- 底部导航栏 -->
        <nav class="bottom-nav">
            <a href="index.html" class="nav-item">
                <span class="nav-icon">🏠</span>
                <span>首页</span>
            </a>
            <a href="signin-center.html" class="nav-item">
                <span class="nav-icon">✓</span>
                <span>签到中心</span>
            </a>
            <a href="orders.html" class="nav-item">
                <span class="nav-icon">📋</span>
                <span>订单中心</span>
            </a>
            <a href="profile.html" class="nav-item active">
                <span class="nav-icon">👤</span>
                <span>我的</span>
            </a>
        </nav>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 更新顶部时间
            function updateTime() {
                const now = new Date();
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');
                document.querySelector('.time').textContent = `${hours}:${minutes}`;
            }
            
            updateTime();
            setInterval(updateTime, 60000);
        });
        
        // 退出登录
        function logout() {
            if (confirm('确定要退出登录吗？')) {
                showToast('正在退出登录...');
                setTimeout(() => {
                    window.location.href = 'login.html';
                }, 1500);
            }
        }
        
        // 轻提示
        function showToast(message) {
            // 检查是否已有toast
            let toast = document.querySelector('.toast');
            if (toast) {
                toast.remove();
            }
            
            // 创建新的toast
            toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            // 样式
            toast.style.position = 'fixed';
            toast.style.left = '50%';
            toast.style.bottom = '10%';
            toast.style.transform = 'translateX(-50%)';
            toast.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
            toast.style.color = 'white';
            toast.style.padding = '10px 20px';
            toast.style.borderRadius = '20px';
            toast.style.fontSize = '14px';
            toast.style.zIndex = '9999';
            toast.style.opacity = '0';
            toast.style.transition = 'opacity 0.3s';
            
            // 显示和自动隐藏
            setTimeout(() => {
                toast.style.opacity = '1';
            }, 10);
            
            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => {
                    toast.remove();
                }, 300);
            }, 2000);
        }
    </script>
</body>
</html> 